<template>
    <router-link :to="to" class="relative md:border-b-2 flex w-full md:h-52 h-40 lg:px-10 md:px-5 md:py-5 py-2">
        <div class="h-full md:w-2/5 w-full overflow-hidden md:rounded-md">
            <img class="h-full w-full" :src="image"  />
        </div>
        <div
            class="md:relative absolute w-full md:h-auto h-40 md:ml-5 px-5 flex flex-col md:justify-between justify-around overflow-hidden"
        >
            <div
                class="md:text-3xl text-lg mt-3  text-white md:text-black text-justify text-shadow"
            >{{ title }}</div>
            <div class="self-end mb-3 md:text-gray-500 md:text-base text-xs text-white text-shadow">{{ date }}</div>
        </div>
    </router-link>
</template>
<script lang="ts" setup>
import { defineProps } from "vue";
defineProps([
    'image',
    'title',
    'date',
    'to'
])

</script>

<style lang="scss">
@media screen and (max-width: 768px) {
    .text-shadow {
        text-shadow: 0 0 3px  rgba(0,0,0,.7);
    }
    
}
</style>